
import React, {Component} from 'react';
import './org-list.css';
import { Table, Divider, Button, Input, Modal } from 'antd';
import {getColumns} from './tableConfig';
import OrgEdit from './components/OrgEdit';
const testData = new Array(10).fill({
    index: 1,
    name: '你好',
    order: 23424,
    type: '政府',
    belong: '中国',
}).map((item, index) => ({...item, key: index}))

class OrgList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: testData,
            columns: getColumns({
                onToggle: this.onToggle.bind(this),
                onEdit: this.onEdit.bind(this),
            }),
        }
    }

    onToggle(item) {

    }
    onEdit(item) {

    }

    changePage(page) {
        console.log(page);
    }

    render() {
        return (
            <div>
                <div className="search-container">
                    <div className="search-label">名称</div>
                    <Input className="search-input" placeholder="请输入机构名称" />
                    <Button type="primary">查询</Button>
                </div>
                <div className="add-container">
                    <Button type="primary">创建</Button>
                </div>
                <Table pagination={{
                    current: 1,
                    total: 100,
                    onChange: this.changePage,
                }} bordered columns={this.state.columns} dataSource={this.state.dataSource}></Table>

                <Modal
                    width={'60%'}
                    title="Vertically centered modal dialog"
                    centered
                    visible={true}
                    footer={null}
                    >
                    <OrgEdit></OrgEdit>
                </Modal>
            </div>
        )
    }
}

export default OrgList;
